{% extends "_layouts/examples.html" %}
{% block title %}Search and filter / Default{% endblock %}

{% block standalone_css %}patterns_search-and-filter{% endblock %}

{% block content %}
<div class="p-search-and-filter">
  <div class="p-search-and-filter__search-container" aria-expanded="false" data-active="true" data-empty="true">
    <form class="p-search-and-filter__box" data-overflowing="false">
      <label class="u-off-screen" for="search">Search and filter</label>
      <input autocomplete="off" class="p-search-and-filter__input" id="search" name="search" placeholder="Search and filter" type="search" value="">
      <button alt="search" class="p-search-and-filter__search-button" type="submit">Search</button>
    </form>
  </div>
  <div class="p-search-and-filter__panel" aria-hidden="true">
    <div class="p-filter-panel-section">
      <h5 class="p-filter-panel-section__heading">Cloud</h5>
      <div class="p-filter-panel-section__chips" aria-expanded="false">
        <button class="p-chip"><span class="p-chip__lead">CLOUD</span><span class="p-chip__value">Google</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">CLOUD</span><span class="p-chip__value">AWS</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">CLOUD</span><span class="p-chip__value">Azure</span></button>
      </div>      
    </div>

    <div class="p-filter-panel-section">
      <h5 class="p-filter-panel-section__heading">Region</h5>
      <div class="p-filter-panel-section__chips" aria-expanded="false">
        <button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-east1</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-north2</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-south3</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-north4</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-east5</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-south6</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-east7</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-east8</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-east9</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">REGION</span><span class="p-chip__value">us-east10</span></button>
      </div>      
    </div>

    <div class="p-filter-panel-section">
      <h5 class="p-filter-panel-section__heading">Owner</h5>
      <div class="p-filter-panel-section__chips" aria-expanded="false">
        <button class="p-chip"><span class="p-chip__lead">OWNER</span><span class="p-chip__value">foo</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">OWNER</span><span class="p-chip__value">bar</span></button><!--
        --><button class="p-chip"><span class="p-chip__lead">OWNER</span><span class="p-chip__value">baz</span></button>
      </div>      
    </div>
  </div>
</div>

<script>
  {% include 'docs/examples/patterns/search-and-filter/_default-script.js' %}
</script>
{% endblock %}
